<template>
    <div class="tabBar">
        <van-tabbar v-model="active">
            <van-tabbar-item to="/index">
                <span>首页</span>
                <img slot="icon"
                     slot-scope="props"
                     :src="props.active ? iconHome.active : iconHome.inactive">
            </van-tabbar-item>
            <van-tabbar-item to="/taskIndex">
                <span>跑屏</span>
                <img slot="icon"
                     slot-scope="props"
                     :src="props.active ? iconRunScreen.active : iconRunScreen.inactive">
            </van-tabbar-item>
            <van-tabbar-item to="/personalCenter">
                <span>我的</span>
                <img slot="icon"
                     slot-scope="props"
                     :src="props.active ? iconUser.active : iconUser.inactive">
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    export default {
        name: "tabBar",
        components: {},

        data() {
            return {
                active: 0,
                iconHome: {
                    active: require('../assets/images/tab_home_active.png'),
                    inactive: require('../assets/images/tab_home.png')
                },
                iconUser: {
                    active: require('../assets/images/tab_user_active.png'),
                    inactive: require('../assets/images/tab_user.png')
                },
                iconRunScreen: {
                    active: require('../assets/images/tab_runscreen_active.png'),
                    inactive: require('../assets/images/tab_runscreen.png')
                }
            }
        },

        created() {
        },
        computed: {},
        watch: {},
        methods: {}
    }
</script>

<style lang="scss" scoped>
    .tabBar {

    }
</style>
